<template>
	<view class="p-2">
		<view class="bg-white p-2 mb-2">
			<u-search placeholder="请输入客户名称" v-model="query.name" :showAction="true" actionText="搜索" :animation="true"
				:clearabled="false" @search="searchList" @custom="searchList" @clear="searchList"
				@blur="searchList"></u-search>
		</view>
		<!-- <view class="flex j-sb a-center  mt-1 px-4 py-2">
			<view @click="selectAll" class="col-3 flex j-start a-center">
				<u-icon v-if="allChecked" name="checkmark-circle-fill" color="#00B0FF" size="19"></u-icon>
				<view v-else class="checkmark"></view>
				<view class="text-secondar ml-1">全选</view>
			</view>
			<view class="flex j-start a-center" @click="handleDelete">
				<u-icon name="trash" color="#888" size="16"></u-icon>

				<view class="ml-1">删除</view>
			</view>
		</view> -->
		<block v-if="listsData.length!=0">
			<view class="mb-3 bg-white p-2" v-for="(item,index) in listsData" :key="index">
				<view class="flex j-end a-center px-2 mb-2">
					<!-- <view @click="changeitem(item)" class="col-2">
						<u-icon v-if="item.checked" name="checkmark-circle-fill" color="#00B0FF" size="19"></u-icon>
						<view v-else class="checkmark"></view>
					</view> -->
					<!-- <view class="flex j-start a-center"> -->
					<view class="flex j-start a-center mr-3"
						@click="navigateTo('pages/warehouse/customer/edit?id='+item.id)">
						<text class="text-secondary mr-1">编辑</text>
						<u-icon name="edit-pen" color="#888" size="14"></u-icon>
					</view>
					<view class="flex j-start a-center" @click="handleDelete(item)">
						<u-icon name="trash" color="#888" size="16"></u-icon>

						<view class="ml-1">删除</view>
					</view>
					<!-- </view> -->
				</view>
				<view class="p-2 " style="background-color: #F9F9F9;">
					<view class="flex j-sb a-center">
						<view>客户名称</view>
						<view class="flex-1 text-right text-secondary">{{item.name}}</view>
					</view>
					<view class="flex j-sb a-center mt-3">
						<view>客户电话</view>
						<view class="flex-1 text-right text-secondary">{{item.phone}}</view>
					</view>
					<view class="flex j-sb a-center mt-3">
						<view>客户地址</view>
						<view class="flex-1 text-right text-secondary">{{item.address?item.address:'--'}}</view>
					</view>
				</view>
			</view>
		</block>
		<empty v-else />

		<view style="height: 180rpx;"></view>
		<view class="position-fixed left-0 bottom-0 bg-white p-4 w-100">
			<view class="btn m-o col-8 rounded-40 " style="height: 70rpx;"
				@click="navigateTo('pages/warehouse/customer/edit')">新增客户</view>
		</view>
	</view>

</template>

<script>
	import {
		customerPageList,
		customerDelete
	} from '@/common/api/customer.js'
	export default {
		name: "customer",
		data() {
			return {
				query: {
					name: '',
					phone: '',
				},
				allChecked: false,
				lists: [{
						checked: false,
						value: 1
					},
					{
						checked: false,
						value: 2
					},
					{
						checked: false,
						value: 3
					}
				],
			}
		},
		onShow() {
			this.searchList();
		},
		onPullDownRefresh() {
			this.searchList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.isLoadMore = true;
				this.query.pageNo += 1;
				this.getLists();
			}
		},
		watch: {},
		computed: {},
		methods: {
			getLists() {
				customerPageList(this.query).then(res => {
					if (res.data && res.data.list.length == 0) {
						let oldLoad = {}
						this.isLoadMore = true;
						oldLoad = Object.assign({}, this.query);
						oldLoad.pageNo = this.query.pageNo;
						this.query = oldLoad
						this.$forceUpdate()
						return
					}

					this.isLoadMore = false;
					let oldList = this.listsData || [];
					oldList.push(...res.data.list);
					this.listsData = oldList;
					this.listsData.forEach(i => {
						i.checked = false
					})
					console.log(this.listsData)
				})
			},
			//单选
			changeitem(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					const cartList = this.listsData.every(item => {
						return item.checked === true
					})
					if (cartList) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
				this.$forceUpdate()
			},

			selectAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.listsData.map(item => {
						item.checked = true
					})
				} else {
					this.listsData.map(item => {
						item.checked = false
					})
				}

			},
			handleDelete(item) {
				// let ids = [];
				// this.listsData.map(item => {
				// 	if (item.checked) {
				// 		ids.push(item.id)
				// 	}
				// })
				// if (ids.length == 0) {
				// 	uni.$u.toast('请选择要删除的数据');
				// 	return
				// }
				uni.showModal({
					title: '提示',
					content: '确定要删除此数据吗？',
					success: res => {
						if (res.confirm) {
							customerDelete({
								id: item.id
							}).then(res => {
								this.searchList();
								uni.$u.toast('删除成功');
							})
						} else if (res.cancel) {

						}
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F9F9F9;
	}

	.checkmark {
		width: 17px;
		height: 17px;
		border: 1px solid #888;
		border-radius: 50%;
	}
</style>